<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="750px" :clickModalClose="true"
			@confirm="handleSubmit" @close="handleClose" :footershow="false">
			<div v-if="formData.certificate_image.length==1"
				style="height: 100%;width: 100%;display: flex;justify-content: center;">
				<img style="height: 500px;width: auto;" :src="formData.certificate_image[0].url" alt="">
			</div>
			<el-carousel v-else :interval="5000" height="500px">
				<el-carousel-item v-for="(item,index) in formData.certificate_image" :key="index">
					<div style="height: 100%;width: 100%;display: flex;justify-content: center;">
						<img style="height: 500px;width: auto;" :src="item.url" alt="">
					</div>
				</el-carousel-item>
			</el-carousel>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import type {
		FormInstance
	} from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import {
		adminAdd,
		adminEdit
	} from '@/api/unit/list'
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef<FormInstance>()
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const mode = ref('add')
	const popupTitle = computed(() => {
		return mode.value == 'edit' ? '查看图片' : '查看图片'
	})
	const formData = reactive({
		certificate_image: []
	})

	const handleSubmit = async () => {
		await formRef.value?.validate()
		mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData)
		popupRef.value?.close()
		emit('success')
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	const setFormData = (data : Record<any, any>) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
	}

	const handleClose = () => {
		emit('close')
	}


	defineExpose({
		open,
		setFormData
	})
</script>
<style scoped>
	.el-carousel__indicators--horizontal {
		display: none;
	}
</style>